<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改新闻</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        /* 自定义过渡效果 */
        .transition-all {
            transition: all 0.3s ease;
        }
    </style>
</head>

<body class="bg-gray-100 font-sans">
    <div class="container mx-auto p-8">
        <div class="flex items-center mb-8">
            <svg xmlns="http://www.w3.org/2000/svg" width="40" fill="#17a2b8" class="bi bi-book-half"
                viewBox="0 0 16 16">
                <path
                    d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
            </svg>
            <h2 class="text-2xl font-bold text-gray-800 ml-2">修改新闻</h2>
        </div>

        <form id="updateNews" class="bg-white p-8 rounded-lg shadow-md">
            <input type="hidden" class="form-control" id="id" name="id">
            <div class="mb-6">
                <label for="title" class="block text-sm font-medium text-gray-700 mb-1">新闻标题:</label>
                <input type="text"
                    class="form-control w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 transition-all"
                    placeholder="请修改新闻标题" id="title" name="title">
            </div>
            <div class="mb-6">
                <label for="author" class="block text-sm font-medium text-gray-700 mb-1">新闻作者</label>
                <input type="text"
                    class="form-control w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 transition-all"
                    placeholder="请修改新闻作者" id="author" name="author" />
            </div>
            <div class="mb-6">
                <label for="newsDate" class="block text-sm font-medium text-gray-700 mb-1">新闻时间</label>
                <input type="text"
                    class="form-control w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 transition-all"
                    placeholder="请修改新闻时间" id="newsDate" name="newsDate" />
            </div>
            <div class="mb-6">
                <label for="newsContent" class="block text-sm font-medium text-gray-700 mb-1">新闻内容</label>
                <textarea
                    class="form-control w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 transition-all"
                    placeholder="请修改新闻内容" id="newsContent" name="newsContent" rows="5"></textarea>
            </div>
            <div class="mb-6">
                <label for="heat" class="block text-sm font-medium text-gray-700 mb-1">新闻热度：</label>
                <input type="number"
                    class="form-control w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 transition-all"
                    placeholder="请修改新闻热度" id="heat" name="heat">
            </div>
            <div class="flex justify-end">
                <button type="button"
                    class="btn btn-info btn-lg bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition-all"
                    onclick="update()">确定</button>
                <button type="button"
                    class="btn btn-secondary btn-lg bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-md ml-4 transition-all"
                    onclick="javascript:history.back()">返回</button>
            </div>
        </form>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        getNewsInfo();
        function getNewsInfo() {
            $.ajax({
                type: "get",
                url: "/news/queryNewsInfoById" + location.search,
                success: function (result) {
                    //TODO 校验非常简陋
                    if (result != null) {
                        var newsInfo = result;
                        if (newsInfo != null) {
                            $("#id").val(newsInfo.id);
                            $("#title").val(newsInfo.title);
                            $("#author").val(newsInfo.author);
                            $("#newsDate").val(newsInfo.newsDate);
                            $("#newsContent").val(newsInfo.newsContent);
                            $("#heat").val(newsInfo.heat);
                        }
                    } else {
                        console.log(result.errMSg);
                    }
                },
                error: function (error) {
                    if (error.status == 401) {
                        //用户未登录
                        location.href = "login.html";
                    }
                }
            });
        }
        function update() {
            $.ajax({
                type: "post",
                url: "/news/updateNews",
                data: $("#updateNews").serialize(),
                success: function (result) {
                    if (result == "") {
                        location.href = "/news.html";
                    } else {
                        alert(result.errMsg);
                    }
                }
            });
            // alert("更新成功");
            // location.href = "book_list.html"
        }
    </script>
</body>

</html>